<link rel="stylesheet" type="text/css" href="static/codemirror/lib/codemirror.css" />
<script type="text/javascript" src="static/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="static/codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="static/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="static/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript" src="static/codemirror/mode/php/php.js"></script>
<script type="text/javascript" src="static/codemirror/mode/xml/xml.js"></script>
<input type="hidden" name="ext_form_id" id="ext_form_id" value="codetpl,cssfile,tplfile,outhtml" />
<style type="text/css">
.CodeMirror {
    border: 1px solid #ccc;
    height: auto !important;
}

.CodeMirror-scroll {
    height: auto !important;
    min-height: 100px;
}
</style>
<script type="text/javascript">
var code_editor;
var css_editor;
function code_input(code,editor)
{
	var tmpname = 'v'+$.phpok.rand(10,'num')
	var html = 'blockhtml-type="'+code+'" blockhtml-name="'+tmpname+'" blockhtml-title="名称" blockhtml-alt="" blockhtml-value="" blockhtml-default=""';
	editor.replaceSelection(html);
	editor.refresh();
	return true;
}

function editor_css_refresh(html)
{
	css_editor.replaceSelection(html);
	css_editor.refresh();
}

function code_select_cssfile()
{
	var url = get_url('filemanage','css','input=cssfile&folder=tpl');
	$.dialog.open(url,{
		'title':'选择CSS文件',
		'width':'70%',
		'height':'500px',
		'lock':true,
		'ok':function(){
			var iframe = this.iframe.contentWindow;
			if (!iframe.document.body) {
				alert('iframe还没加载完毕呢');
				return false;
			};
			iframe.save();
			return false;
		}
	});
}
function code_select_tplfile()
{
	var val = $("#tplfile").val();
	var folder = 'tpl';
	if(val){
		var tmp = val.split('/');
		tmp.pop();
		folder = tmp.join('/');
	}
	var url = get_url('filemanage','file','input=tplfile&folder='+$.str.encode(folder));
	$.dialog.open(url,{
		'title':'选择模板文件',
		'width':'70%',
		'height':'500px',
		'lock':true
	});
}
</script>
<div class="layui-form-item">
	<label class="layui-form-label">
		{lang样式：}
	</label>
	<div class="layui-input-block">
		<textarea id="cssfile" name="cssfile">{$rs.cssfile}</textarea>
	</div>
	<div class="layui-input-block">
		<div class="layui-btn-group">
			<input type="button" value="选择" onclick="code_select_cssfile()" class="layui-btn layui-btn-sm" />
			<input type="button" value="清空" onclick="css_editor.setValue('')" class="layui-btn layui-btn-sm layui-btn-danger" />
		</div>
	</div>
</div>

<div class="layui-form-item">
	<label class="layui-form-label">
		{lang模板代码：}
	</label>
	<div class="layui-input-block gray">
		<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-xs" onclick="code_input('edit',code_editor)">
				文本框
			</button>
			<button type="button" class="layui-btn layui-btn-xs" onclick="code_input('image',code_editor)">
				图片
			</button>
			<button type="button" class="layui-btn layui-btn-xs" onclick="code_input('video',code_editor)">
				视频
			</button>
			<button type="button" class="layui-btn layui-btn-xs" onclick="code_input('link',code_editor)">
				链接
			</button>
			<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="code_editor.setValue('')">
				清空
			</button>
		</div>
	</div>
	<div class="layui-input-block">
		<textarea id="codetpl" name="codetpl">{$rs.codetpl}</textarea>
	</div>
</div>

<div class="layui-form-item">
	<label class="layui-form-label">
		{lang模板文件：}
	</label>
	<div class="layui-input-block gray">模板代码和模板文件至少得有一个不为空</div>
	<div class="layui-input-block">
		<div class="layui-row">
			<div class="layui-col-xs8">
		    	<input type="text" name="tplfile" id="tplfile" value="{$rs.tplfile}" class="layui-input" />
			</div>
			<div class="layui-col-xs3">
				<div style="margin-left:10px">
				<div class="layui-btn-group">
					<input type="button" value="选择" onclick="code_select_tplfile()" class="layui-btn layui-btn-sm" />
					<input type="button" value="删除" onclick="$('#tplfile').val('')" class="layui-btn layui-btn-sm layui-btn-danger" />
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">
		{lang输出：}
	</label>
	<div class="layui-input-block gray" style="line-height:38px;">{lang前端一般输出数组特别是适合绑定模板}</div>
	<div class="layui-input-block">
		<input type="radio" name="outhtml" value="0"{if !$rs.outhtml} checked{/if} title="{lang数组变量}" />
		<input type="radio" name="outhtml" value="1"{if $rs.outhtml} checked{/if} title="{lang输出HTML}" />
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	setTimeout(function(){
		code_editor = CodeMirror.fromTextArea(document.getElementById("codetpl"),{
			lineNumbers		: true,
			matchBrackets	: true,
			lineWrapping	: true,
			indentWithTabs	: true,
			indentUnit		: 4
		});
		code_editor.on("change",function(obj){
			$("#codetpl").val(obj.getValue());
		});
		css_editor = CodeMirror.fromTextArea(document.getElementById("cssfile"),{
			lineNumbers		: true,
			matchBrackets	: true,
			lineWrapping	: true,
			indentWithTabs	: true,
			indentUnit		: 4
		});
		css_editor.on("change",function(obj){
			$("#cssfile").val(obj.getValue());
		});
	}, 500);
});
</script>